<template>
	<div class="notice_box">
        <p class="close" @click="close(false)"><u-icon name="close" color="#999999" size="20"></u-icon></p>
        
        <div class="nr">
            <p  class="img">
                <img src="https://zxsd-oss-img.oss-cn-chengdu.aliyuncs.com/cdcdc450ce96491703f5c9a994c9d87c2d2b011fd04ba2de448017092feab441.jpg" alt="">
            </p>
            <div class="msg">
                <div>
                    <p class="name">鱼香肉丝</p>
                    <p class="label">@重庆诸信科技有限公司</p>
                </div>
                <p class="cc">宝子们！放心使用，这里主打一个免费！</p>
            </div>
        </div>
        <div class="anniu_box">
            <p @click="close(true)">去接单</p>
            <p @click="close(true)">去发布</p>
        </div>
    </div>
</template>

<script>
	export default {
        options: {
            styleIsolation: 'shared'
        },
		data() {
			return {
			}
		},
		methods: {
			
            close(state){
                this.$emit('close',state)
            }
		},
        mounted(){
            console.log('111')
        },
        onLoad() {
		},
		onShow(){
            console.log('222')
        }
	}
</script>

<style lang="scss" scoped>
    @mixin content-flex($pitch) {
		display: flex;
		align-items: center;
		justify-content:  $pitch;
	}
	.notice_box{
        width: 680rpx;
        border-radius: 20rpx;
        background: linear-gradient(180deg, #D3F6D9 0%, #FFFFFF 36%);
        position: relative;
        .nr{
            height: 150rpx;
            background: #D3F6D9;
            border-top-left-radius: 20rpx;
            border-top-right-radius: 20rpx;
            padding:26rpx;
            display: flex;
            padding-top:50rpx;
            .msg{
                margin-left:16rpx;
                flex: 1;
                div{
                    display: flex;
                    align-items: center;
                    font-size:26rpx;
                    .name{
                        color:#333;
                    }
                    .label{
                        color:rgb(238, 163, 22);
                        margin-left:20rpx;
                        font-size:26rpx;
                    }
                }
                .cc{
                    font-size:24rpx;
                    padding:24rpx;
                    background: #fff;
                    margin-top:15rpx;
                    border-radius: 20rpx;
                    border-top-left-radius: 0;
                }
            }
            .img{
                width: 80rpx;
                height: 80rpx;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 6rpx;
                }
            }
        }
        .close{
            display: flex;
            justify-content: flex-end;
            padding-top:24rpx;
            position: absolute;
            top:0;
            right: 20rpx;
        }
        .title{
            font-size: 40rpx;
            font-weight: 500;
            color:#333;
            margin:0 0 32rpx 0;
        }
        .text{
            font-size: 30rpx;
            color: #333333;
            line-height: 56rpx;
        }
        .anniu_box{
            display: flex;
            justify-content: space-between;
            margin:30rpx;
            p{
                width: 47%;
                height: 40px;
                line-height: 40px;
                border-radius: 50px;
                background: #08961F;
                text-align: center;
                font-size: 30rpx;
                font-weight: 500;
                color:#fff;
                border:1px solid transparent;
                &:last-child{
                    border-color: #08961F;
                    color:#08961F;
                    background: none;
                }
            }
        }
    }
</style>
